$color__inactive: #616161;
$color__primary: #3F51B5;
$color__read: #9F9F9F;
$color__checkbox__star: #616161;

$prefix: 'stbui-table';

:host {
  display: block;
  height: 100%;
}

.#{$prefix} {
  position: relative;
  min-height: 60px;
  max-height: 60px;
  padding: 8px 24px;
  white-space: nowrap;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  color: $color__inactive;
  transition: background .1s ease-in-out;
  border-bottom: 1px solid #EEE;
  cursor: pointer;

  &.read {
    color: $color__read;
    font-weight: normal;
  }

  &:hover {
    background: #EEE;
  }
}

.#{$prefix}-container {
  margin: 15px;
}

.#{$prefix}-main {
  margin-top: 10px;
  max-height: 420px;
  overflow: hidden;
}

.#{$prefix}-toolbar {
  box-sizing: border-box;
  min-height: 60px;
  max-height: 60px;
  border-bottom: 1px solid #eee;
  padding: 8px 24px;
  color: $color__inactive;
}

.start-wrapper {
  padding-right: 8px;

  .checkbox {
    margin: 0 8px 0 0;
    color: $color__checkbox__star;
  }
}

.content-wrapper {
  white-space: nowrap;
  overflow-x: hidden;
  display: block;
  margin: 0;
}

.end-wrapper {
  margin-left: 16px;
}

.manage-sidenav-container {
  height: calc(100% - 180px);
  > mat-sidenav {
    width: 200px;
  }

}

.manage-sidenav-content {

}

.header {
  height: 180px;
  background: linear-gradient(90deg, #00b3ff, #08f);
}

.contact-add-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.avatar {
  border-radius: 50%;
  width: 100%;
  height: 100%;
}
